<%@ page language="java" pageEncoding="utf-8"%>
<%@page import="com.farm.web.constant.FarmConstant"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="/view/conf/farmtag.tld" prefix="PF"%>
<div id="main"
	style="width: 98%; height: 160px; margin: auto; background-color: #dddddd; margin-top: 6px; border-radius: 1em;"></div>
<script type="text/javascript">
	var nodes = []; 
	$(function() {
		init('${active.id}');
	});
	//加载流程图
	function init(activeid) {
		$.post('proDesigner/loadActiveData.do', {
			'activeId' : activeid
		}, function(flag) {
			if (flag.STATE == 0) {
				loadGraph(flag.nodes, flag.links);
			} else {
				alert(flag.MESSAGE);
			}
		}, 'json');
	}
	//加载图
	function loadGraph(nodes, relations) {
		var myChart = echarts.init(document.getElementById('main'));
		// 指定图表的配置项和数据
		var option = {
			animationDurationUpdate : 1500,
			animationEasingUpdate : 'quinticInOut',
			series : [ {
				type : 'graph',
				layout : 'none',
				symbolSize : 30,
				roam : true,
				label : {
					show : true
				},
				edgeSymbol : [ 'circle', 'arrow' ],
				edgeSymbolSize : [ 4, 10 ],
				edgeLabel : {
					fontSize : 20
				},
				data : nodes,
				label : {
					normal : {
						show : true,
						position : 'bottom',
						formatter : function(params) {
							return params.data.subTitle;
						}
					}
				},
				links : relations,
				lineStyle : {
					opacity : 0.9,
					width : 2,
					curveness : 0
				}
			} ]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		myChart.off('click');
		myChart.on('click', function(params) {
			if (params.data.name) {
				$(nodes).each(function(i, obj) {
					if (obj.name == params.data.name) {
						obj.itemStyle.borderColor = '#a0c69d';
						obj.itemStyle.borderWidth = 15;
					} else {
						obj.itemStyle.borderColor = '#ffffff';
						obj.itemStyle.borderWidth = 0;
					}
				});
				$.post('prorun/chooseActiveNode.do', {
					'activeid' : '${active.id}',
					'nodeid' : params.data.name
				}, function(flag) {
					if (flag.STATE == 0) {
						//成功
						loadForm();
						init('${active.id}');
					} else {
						alert(flag.MESSAGE);
					}
				}, 'json');
			}
		});
	}
</script>